<template>

	<view>
		<view class="toptile">我的标签<text class="maxtag">(最多选{{maxChoose}}个标签)</text></view>
		<view class="listbox">
			<view v-for="(item, index) in list" :key="index" class="name" :class="item.checked ? 'text4' : ''"
				@click="skitype(item.ID, item.checked)">{{ item.Tag }}</view>
			<view v-for="(value, index) in list2" :key="index" class="addname">
				{{ value }}
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1714100419674298.png" mode="aspectFill"
					@click="del(index)"></image>
			</view>
			<view v-if="isflag" class="custombox" @click="isflag = !isflag">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1714100377368714.png"></image>
				<text>自定义</text>
			</view>
			<input @blur="addtag" @input="inpTag" v-else :value="tagtext" type="text" class="customiput"
				placeholder="请输入标签内容" placeholder-class="placeholderStyle" />
		</view>
		<view class="start" @click="sub">确定</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isflag: true,
			tagtext: '',
			load: true,
			sum: 0,
			sum2: 0,
			list: [],
			list2: [],
			signInfo: {},
			maxChoose: 10,
			comData: {
				Content: "",
				Images: "",
				CompanyID: 6003,
				CatalogID: 0,
				Title: "",
				IsVideo: 0
			},
			user:{},
			tag:[]
		};
	},
	computed: {
		lastchooseList() {
			const list = this.list
			let newList = []
			const list2 = this.list2 || []
			for (var i = 0; i < list.length; i++) {
				if (list[i].checked) {
					newList.push(list[i].Tag)
				}
			}
			let arr = newList.concat(list2);  //合并数组
			let arrNew = new Set(arr);
			let arrlist = Array.from(arrNew)
			return Array.from(arrNew)
		},
		canChoose() {
			const list = this.lastchooseList
			const maxNum = this.maxChoose

			return list.length < maxNum ? true : false
		}
	},
	async onLoad(e) {
		await this.userInfo()
		this.getMemberTag()
		// console.log(this.$store.state.signInfo,'statestatestatestate');
		this.signInfo = this.$store.state.signInfo
		
	},
	onShow() {
		
	},
	methods: {
		async getMemberTag(){
			let res = await this.$api.post('Member/GetMemberTag', {
				PageIndex: 1,
				PageSize: 20
			});
			if (res.data) {
				
				this.list = res.data;
				let newList = []
				console.log(this.tag,'tag');
				for (let i = 0; i < this.list.length; i++) {
					let tagIndex = this.tag.indexOf(this.list[i].Tag)
					this.$set(this.list[i], 'checked', tagIndex !== -1?true:false)
					if (tagIndex !== -1) {
						this.tag.splice(tagIndex,1)
					}
				}
				this.list2 = this.tag
			}
			console.log(this.list);
		},
		async userInfo(){
			let res = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			});
			this.user = res.data;
			if(res.data.Tag){
				this.tag = res.data.Tag.split(',')
			}
		},
		
		del(index) {
			this.list2.splice(index, 1);
		},
		inpTag(e) {
			console.log(e, 'input');
			this.tagtext = e?.detail?.value.substring(0, 8)
		},
		addtag(e) {
			let con = this.tagtext.trim().replace(' ', '')
			if(!con){
				this.tagtext = '';
				this.isflag = !this.isflag;
				this.$pv.msg('请输入内容');
				return
			}
			const maxNum = this.maxChoose
			if (this.tagtext && this.canChoose) {
				this.list2.push(this.tagtext);
			} else {
				this.$pv.msg('最多选' + maxNum + '个标签');
			}
			this.tagtext = '';
			this.isflag = !this.isflag;
		},
		skitype(id, checked) {
			let list = this.list;
			const maxNum = this.maxChoose
			if (!checked && !this.canChoose) {
				this.$pv.msg('最多选' + maxNum + '个标签');
				return
			}
			for (let i = 0; i < list.length; i++) {
				list[i].checked = list[i].ID == id ? !list[i].checked : list[i].checked;
			}
		},
		async sub() {
			uni.setStorageSync('iscoupon', true);
			const list = this.lastchooseList
			if(!list.length){
				this.$pv.msg('请选择标签');
				return
			}
			const maxNum = this.maxChoose
			if (list.length > maxNum) {
				this.$pv.msg('最多选' + maxNum + '个标签');
				return
			}
			let rex = await this.$api.post('/User/AddTag',{
				Tag:this.lastchooseList.join(',')
			})
			if(rex.code==0){
				this.$pv.msg('保存完成');
				uni.$emit('tag')
				this.nav_back(500);
			}else{
				this.$pv.msg(rex.message);
			}
		}
	},
	
};
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.placeholderStyle {
	font-size: 24rpx;
	color: #999999;
}

.custombox {
	width: 206rpx;
	height: 72rpx;
	border: 1rpx solid #e4e4e4;
	border-radius: 8rpx;
	line-height: 72rpx;
	text-align: center;
	margin-left: 30rpx;

	image {
		width: 20rpx;
		height: 22rpx;
		vertical-align: middle;
	}

	text {
		font-size: 28rpx;
		color: #999999;
	}
}

.customiput {
	width: 206rpx;
	height: 72rpx;
	font-size: 28rpx;
	border: 1rpx solid #e4e4e4;
	border-radius: 8rpx;
	line-height: 72rpx;
	// text-align: center;
	margin-left: 30rpx;
	color: #999999;
	padding: 0 10rpx;
	box-sizing: border-box;
}

.start {
	width: 654rpx;
	height: 96rpx;
	border-radius: 16rpx;
	text-align: center;
	line-height: 96rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #fff;
	background-color: #0d0d0d;
	position: fixed;
	bottom: 88rpx;
	left: 48rpx;
}

.text4 {
	color: #fff !important;
	background-color: #0d0d0d !important;
}

.toptile {
	font-size: 36rpx;
	color: #0d0d0d;
	font-weight: 600;
	margin-bottom: 48rpx;
	margin-left: 48rpx;
	margin-top: 50rpx;

	.maxtag {
		font-size: 24rpx;
		color: #333333;
	}
}

.title_2 {
	font-size: 28rpx;
	color: #999999;
	margin-bottom: 64rpx;
	margin-left: 48rpx;
}

.listbox {
	display: flex;
	flex-wrap: wrap;
	padding: 0 10rpx;
	.name {
		width: 152rpx;
		height: 72rpx;
		border-radius: 8rpx;
		background-color: #f7f7f7;
		text-align: center;
		line-height: 72rpx;
		color: #333333;
		font-size: 28rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
	}

	.addname {
		// min-width: 180rpx;
		// max-width: 320rpx;
		width: fit-content;
		height: 72rpx;
		border-radius: 8rpx;
		background-color: #0d0d0d;
		text-align: center;
		line-height: 72rpx;
		color: #fff;
		font-size: 28rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		position: relative;
		padding: 0 40rpx;
		display: flex;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
			// vertical-align: middle;
			position: absolute;
			top: 50%;
			right: 12rpx;
			transform: translateY(-50%);
		}
	}
}

.listbox view:last-child {
	width: 180rpx !important;
}

.listbox view:first-child {
	margin-left: 30rpx !important;
}

.listbox view:nth-child(5) {
	margin-left: 30rpx !important;
}
</style>
